const path = require('path');
const webpack = require('webpack');
let { WebPlugin } = require('web-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
    // plugins: [
    //     new BundleAnalyzerPlugin(),
    // ],
    devServer: {
        contentBase: path.join(__dirname, "dist"),
        compress: true,
        port: 9001,
        hot: true
    },
    devtool: 'inline-source-map',
    plugins: [
        new WebPlugin({
            //输出的html文件名称
            filename: 'index.html',
            //这个html依赖的`entry`
            requires: ['app'],
        }),
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ],
    mode: 'production',
    entry: {
        app: './src/index.js',
        vendor: ['react', 'lodash'],
    },
    optimization: {
        splitChunks: {
            chunks: "all",
        }
    },
    watch: true,
    output: {
        chunkFilename: 'dist/[name].chunk.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.less$/,
                use: [{
                    loader: 'style-loader' // creates style nodes from JS strings
                }, {
                    loader: 'css-loader' // translates CSS into CommonJS
                }, {
                    loader: 'less-loader' // compiles Less to CSS
                }]
            },
            { test: /\.css$/, loader: 'style-loader!css-loader' },
        ]
    }
};
